<div class="collection-item" [ngClass]="{ active: collection.collectionStatus === 5 }">
  <div class="item-title">
    <b>{{ collection.collectionName }}&emsp;·&emsp;{{collection.pictureName}}</b>
  </div>
  <img [src]="collection.url" class="big-img" alt="" />
  <div class="item-top">
    <div class="avatar">
      <img src="../../../assets/img/default.png" alt="" />
    </div>
    <span>{{ collection.issuer }}</span>
  </div>
  <hr style="margin: 0" />
  <div class="item-middle">
    <div style="max-width: 240px">
      <app-countdown *ngIf="collection.collectionStatus === 4" title="等待：" [enddate]="collection.saleTime"
        (callGetList)="callGetList()" type="collection"></app-countdown>
      <app-countdown *ngIf="collection.collectionStatus === 5" title="出售中：" [enddate]="collection.offShelfTime"
        (callGetList)="callGetList()" type="collection"></app-countdown>
      <div style="margin-left: -2px; position: absolute; bottom: 0">
        <b>￥{{ collection.price }}</b><span style="font-size: 12px; margin-left: 16px">{{ collection.remain }} / {{
          collection.supplies }}</span>
      </div>
    </div>
    <d-button class="apply" *ngIf="collection.collectionStatus === 5 && collection.remain" [bordered]="true"
      (click)="applyCollecti(collection)">立即抢购</d-button>
    <d-button *ngIf="collection.collectionStatus === 5 && collection.remain === 0" class="btn-disabled"
      [bordered]="true" [disabled]="true">已售罄</d-button>
    <d-button [bordered]="true" class="btn-disabled" *ngIf="collection.collectionStatus === 4" [disabled]="true">即将开售
    </d-button>
    <d-button [bordered]="true" class="btn-disabled" *ngIf="collection.collectionStatus === 6" [disabled]="true">已结束
    </d-button>
  </div>
</div>
